<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="js/flexible.js"></script>
     <style>
       *{
           margin: 0;
           padding: 0;
       }
    .box{
         width: 100%;
         height: 100vh;
         display: flex;
         flex-direction: column;
       
         
     }
     .head{
         width: 100%;
         height: 1.173333rem;
      
         /* border: 1px solid blue; */
       
     }
     .con{
         flex: 1;
         /* background-color: pink; */
         display: flex;
         /* justify-content: center; */
          /* width: 100%; */
         flex-direction: column;
         /* align-items: center; */
     }
     .btm{
         width: 100%;
         height: 1.306667rem;
         /* background-color: red; */
         
     }
     .btm ul{
        width: 9.453333rem;
        height: 1.306667rem;
        display: flex;
         justify-content: center;
         align-items: center;
         list-style: none;
         font-size: .053333rem;
     }
     .btm ul li{
        margin-left: 1.066667rem;
     }
     .nav{
         width: 10rem;
         height: 1.173333rem;
         display: flex;
         justify-content: center;
         align-items: center;
          /* border: 1px solid rgb(0, 1, 2); */
     }
     .nav div:nth-child(1){
          width: 1.333333rem;
          height: 1.066667rem;
          /* border: 1px solid red; */
         margin-left: .693333rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
     }
     .nav div:nth-child(1) img{
           width: .88rem;
           height: .88rem;
            /* margin-top: .133333rem; */
     }
     .nav div:nth-child(1) p{
        width: 1.333333rem;
           height: .8rem;
            /* border:1px solid red; */
            /* margin-top: .133333rem; */
     }
     .nav div:nth-child(1) span{
           font-size: .053333rem;
           display: inline-block;
           width: 1.333333rem;
           height: .8rem;
     }
     .nav div:nth-child(2){
         flex: 1;
         /* border: 1px solid red; */
    }
    .nav div:nth-child(2) input{
        width: 6.8rem;
        height: .813333rem;
         border: 1px dashed rgb(63, 64, 65);
         margin-left: .266667rem;
         font-size: 15px;
         color: rgb(63, 64, 65);
    }
     .nav div:nth-child(3){
          width: .586667rem;
          height: .586667rem;
          /* border: 1px solid red; */
          margin-right: .693333rem;
          
        }
        .nav div:nth-child(3) img{
          width: .586667rem;
          height: .586667rem;
          margin-left: .266667rem;
          /* border: 1px solid red; */
          /* margin-right: .693333rem; */
        }
        .lun{
            width: 100%;
            height: 2.666667rem;
            display: flex;
             /* border: 1px dashed red; */
             margin-top: 10px;
           justify-content: center;
        }
        .lun img{
            width: 9.44rem;
            height: 2.666667rem;
             border: 1px dashed red;
        }
        .con1{
            display: flex;
            /* justify-content: center; */
            align-items: center;
            width: 9.44rem;
            height: 1.626667rem;
            /* border: 1px solid blue; */
            list-style: none;
            text-align: center;
        }
        .con1 li{
            width: 1.6rem;
            height: 1.626667rem;
            /* border:1px solid red; */
           font-size: .133333rem;
           /* padding-left: .133333rem; */
           margin-left: .266667rem;
        }
        .qw{
            width: 100%;
            height: 2.16rem;
            /* background-color: blue; */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .shi{
            width: 100%;
            height: 1.6rem;
            display: flex;
           
        }
        .shi-top{
            width: 9.413333rem ;
            height: 2.24rem ;
            /* border: 1px solid red; */
          display: flex;
        }
         .xian{
             display: flex;
             
         }
         .xian h3{
            font-size: .266667rem;
            border: 1px solid palevioletred;
            color: palevioletred;
            
            margin-left: .266667rem;
         }
        .xian h1 {
             
              font-size: .4rem;
        }
        .shi-left{
            width: 4rem;
            height: 2.24r;
            /* border:1px solid red; */
            margin-left: .8rem;
        } 
        .shi-left p{
            font-size: .4rem;
            color: rgb(63, 64, 65);
            margin-top: .266667rem;
            width: 100%;
            /* border:1px solid red; */
        }

        .shi-btm{
            width:100%;
            height: 3.226667rem;
          
          display: flex;
          justify-content: center;
         align-items: center;
        }
        .shi-btm ul{
            width: 9.413333rem;
            height: 3.226667rem;
            list-style: none;     
            font-size: .213333rem;
            color: rgb(110, 110, 110);
            display: flex;
        }
        .shi-btm ul li{
            margin-left: .266667rem;
            margin-top: .266667rem;
            /* border: 1px solid red; */
        }
        .shi-btm ul li p{
            width: 2.133333rem;
            text-align: center;
            /* border: 1px solid red; */
        }
      
        .shi-btm ul li span img{
            width: 2.133333rem;
            height: 1.733333rem;
        }
        .zf{
            width: 100%;
            height: 1.644267rem;
            /* background-color: rgb(165, 16, 16); */
            display: flex;
            justify-content: center;
        }
        .zf1{
            width: 9.453333rem;
            height: 1.642667rem;
        }
        .gz{
            width: 100%;
            height: 1.333333rem; 
            margin-top: .4rem;
            display: flex;
            justify-content: center;
        }
        .gz ul{
            width: 9.453333rem;
            height: 1.333333rem; 
            font-size: .4rem;
            display: flex;
            list-style: none;
            justify-content: center;
            align-items: center;
        }
        .gz ul li{
          
            margin-left: .533333rem;
        }
        .gz ul li span{
           color: rgb(134, 134, 134);
          
      }
      .cj{
        width: 100%;
        height: .8rem; 
        /* background-color: red; */
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cj ul{
            width: 9.453333rem;
            height: .8rem; 
          display: flex;
          /* border:1px solid red; */
          justify-content: center;
          list-style: none;
          align-items: center;
      }
      .cj ul li{
            margin-left: .133333rem;
      }
      .zd{
          width: 100%;
          height: 1.333333rem;
          display:flex ;
          justify-content: center;
          align-items: center;
      }
      .zd1{
        width: 9.453333rem;
        height: 1.333333rem;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 1.333333rem;
      }
      .zd1:nth-child(1){
          font-size: .533333rem;
      }
      /* .zd1:nth-child(2){
         flex: 1;
      }
      .zd1:nth-child(3){
        margin-left: .133333rem;
      } */
     </style>
</head>
<body>
      <div class="box">
         <div class="head">
              <div class="nav">
                 <div>
                     <p><img src="img/ic_examine.png" alt=""></p>
                     <span>查产品</span>
                 </div>
                 <div>
                     <input type="text" placeholder="搜查200万+化妆品安全">
                 </div>
                 <div><img src="img/ic_sm.png" alt=""></div>
              </div>
         </div>
         <div class="con">
                         <!-- 轮播图 -->
              <div class="lun"><img src="img/banner1.png" alt=""></div>
                   <!-- 类别 -->
              <div class="qw">
                <ul class="con1">
                  <li>
                      <p><img src="img/ic_photo.png" alt=""></p>
                      <span>拍照肤测</span>
                  </li>
                  <li>
                    <p><img src="img/ic_list.png" alt=""></p>
                    <span>美秀榜单</span>
                </li>
                <li>
                    <p><img src="img/ic_chapihao.png" alt=""></p>
                    <span>查批号</span>
                </li>
                <li>
                    <p><img src="img/ic_intelligence.png" alt=""></p>
                    <span>省钱快报</span>
                </li>
                <li>
                    <p><img src="img/ic_ring.png" alt=""></p>
                    <span>PK擂台</span>
                </li>
              </ul>
              </div>
            <!-- 试用中心 -->
             <div class="shi">
                   <div class="shi-top">
                       <div class="shi-left"> 
                           <div class="xian"><h1>试用中心</h1><h3>限时</h3></div>
                           <p>精选好物免费</p>
                        </div>
                        <div class="shi-left"> 
                            <div class="xian"><h1>美秀盒</h1><h3>限时</h3></div>
                            <p>严选小样|每周五上新</p>
                         </div>
                   </div>     
             </div>
             <div  class="shi-btm">
                <ul>
                    <li>
                        <img src="img/image1.png" alt="">
                          <p>毕生之研五环</p>
                          <p>秀红调理精华</p>
                    </li>
                    <li>
                        <img src="img/image2.png" alt="">
                          <p>肤清秘钥立体</p>
                          <p>水杨酸面膜</p>
                    </li>
                    <li>
                        <span><img src="img/image3.png" alt=""></span>
                        
                          <p>你的定制护肤</p>
                          <p>方案</p>
                    </li>
                    <li>
                        <img src="img/image4.png" alt="">
                          <p>肌侣梦幻du咖</p>
                          <p>毛孔清润面膜</p>
                    </li>
                </ul>
             </div>
             <!-- 下面内容 -->
               <div class="zf">
                          <div class="zf1"><img src="img/banner2.png" alt=""></div>
               </div>
               <!-- 关注 -->
               <div class="gz">
                   <ul>
                       <li> <h3>关注</h3></li>
                       <li><span>|</span></li>
                       <li><h3>推荐</h3></li>
                       <li><span>|</span></li>
                       <li><h3>测评</h3></li>
                       <li><span>|</span></li>
                       <li><h3>修宝说</h3></li>
                   </ul>
               </div>
               <!-- 抽奖 -->
               <div class="cj">
                   <ul>
                       <li><img src="img/ic_fuhao1.png" alt=""></li>
                       <li><img src="img/ic_fuhao2.png" alt=""></li>
                       <li><img src="img/ic_fuhao3.png" alt=""></li>
                   </ul>
               </div>
               <!-- 最底部 -->
                <div class="zd">
                         <div class="zd1" >
                            <div>彤人秘精花露</div>
                            <div> </div>
                            <div><img src="img/image5.png" alt=""></div>
                         </div>
                </div>
              

         </div>
         <div class="btm">
             <ul>
                 <li>
                     <img src="img/ic_home_s.png" alt="">
                     <p>首页</p>
                </li>
            <li>
                <img src="img/ic_selection_n.png" alt="">
                <p>选品</p>
             </li>
             <li>
                <img src="img/ic_gengduo.png" alt="">
             </li>
             <li>
                <img src="img/ic_skin_n.png" alt="">
                <p>肤质</p>
             </li>  
             <li>
                <img src="img/ic_my_no.png" alt="">
                <p>我的</p>
             </li>
             </ul>
         </div>
      </div>



</body>
</html>